import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const TooltipSlider = () => {
  const [value, setValue] = useState(50);

  const handleChange = (values) => {
    setValue(values[0]);
  };

  const handleEnd = (values) => {
    console.log('滑块结束时的值:', values[0]);
    console.log('滑块范围:', {
      min: 0,
      max: 100,
      current: values[0]
    });
  };

  // 自定义格式化函数
  const format = {
    to: (value) => {
      return `$${Math.round(value)}`;
    },
    from: (value) => {
      return Number(value.replace('$', ''));
    }
  };

  return (
    <div className="tooltip-slider-container">
      <h2>带工具提示的滑块示例</h2>
      <div className="slider-wrapper">
        <div className="slider-header">
          <span>价格范围</span>
          <span className="current-value">${value}</span>
        </div>
        <NoUiSlider
          start={[value]}
          range={{
            min: 0,
            max: 1000
          }}
          connect={[true, false]}
          onChange={handleChange}
          onEnd={handleEnd}
          tooltips={[{
            to: (value) => `$${Math.round(value)}`,
            from: (value) => Number(value.replace('$', ''))
          }]}
          step={10}
          format={format}
        />
      </div>
    </div>
  );
};

export default TooltipSlider; 